<template>
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750" bg-color="#efeff4" ></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"  style="height: 700px;">
			<swiper-item class="swiper-item" v-for="(item,index) in tabs">
				<scroll-view scroll-y style="height: 700px;width: 100%;" @scrolltolower="onreachBottom">
					 <view id="demo1" class="order-box" v-for="(item, index) in tabs[current]" :key="index">
						<view class="ordertime">下单时间 {{item.orTime}}</view>
						<view class="goods-info" @click="goOrderDetail(item.orId,item.adId,item.zitiId,item.orPeisongtype,item.orStatus)">
							<view>
								<image :src="switchImg(item.gimages)" class="goods-img" mode="heightFix"></image>
							</view>
							<view class="goods-name">
								<view>
									<view>{{item.gname}}</view>
									<view class="qian">{{item.odCost}}</view>
								</view>
								<view>
									<view class="jianjie">{{item.jianjie}}</view>
									<view>×{{item.odNum}}</view>
								</view>
							</view>
						</view>
						<view class="summary-box">
							共{{item.orTotalnum}}件商品 合计: <text class="qian">{{item.orPrice}}</text> (含运费<text class="qian">{{item.orYunfei}}</text>)
						</view>
						<view class="status-box">
							<view class="status-btn" @click.stop="shanOrder(item.orId)" v-show="item.orStatus==0">删除订单</view>
							<view v-if="item.orStatus<3 && item.orStatus>0 && item.orPeisongtype==0" class="status-btn2" @click="ziti(item.code)">自提</view>
							<view class="status-btn" @click.stop="checkWuliu(item.orId)" v-show="item.orStatus==2 && item.orPeisongtype==1">查看物流</view>
							<view class="status-btn" @click.stop="fukuanOrShouhuo(item.orStatus,item.orId,item.gid)">{{item.orStatus | showStatus}}</view>
						</view>
					 </view>
					<u-loadmore :status="status" @loadmore="onreachBottom" />
				</scroll-view>
				
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',	// 上拉加载
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				page:1,
				n:10,	// 订单状态 
				list: [{	name:"全部"},	// 分段器
							{	name: '待付款'
								}, {
									name: '待发货'
								}, {
									name: '待收货'
								},{
									name:"已收货"
								},{
									name:"自提"
								}],
					tabs:[	// 数据
						[],	// 全部订单
						[],[],[],[],[]
					],
					// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
					current: 0, // tabs组件的current值，表示当前活动的tab选项
					swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		onLoad(opt) {
			// 根据参数显示指定的tab项
			this.current = opt.index;
			this.swiperCurrent = opt.index;
			switch (opt.index){
				case '0': this.n='10';break;	// 全部
				case '1': this.n='0';break;	// 未付款
				case '2': this.n='1';break;	// 未发货
				case '3': this.n='2';break;	// 未收货
				case '4': this.n='3';break;	// 已收货
				case '5': this.n='4';break;	// 已收货
			}
			// 加载不同状态的订单
			this.getOrders(10,0);
			this.getOrders(0,1);
			this.getOrders(1,2);
			this.getOrders(2,3);
			this.getOrders(3,4);
			this.getOrders(4,5);
			console.log("666")
			console.log(this.tabs)
		},
		computed:{
			
		},
		filters:{
			showStatus(s){
				if(s=='0')
					return "立即支付";
				else if(s=='1')
					return "待发货";
				else if(s=='2')
					return "立即收货";
				else if(s=='3')
					return "已收货";
			}
		},
		methods: {
			// 设置图片路径
			switchImg(s){
				return this.host+s;
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
			if(this.page >= 3) return ;
				this.status = 'loading';
				this.page = ++ this.page;
				setTimeout(() => {
					if(this.page >= 3) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			},
			// 跳转到订单详情
			goOrderDetail(id,adid,zitiId,orPeisongtype,orStatus){
				let dizhiId = '';
				if(orPeisongtype==0){
					dizhiId = zitiId
				}else{
					dizhiId = adid
				}
				uni.navigateTo({
					url:'orderDetail?orid='+id+"&adid="+dizhiId+'&orPeisongtype='+orPeisongtype+'&orStatus='+orStatus
				})
			},
			// 付款或收货快捷键
			fukuanOrShouhuo(s,id,gid){
				if(s==0){
					// xielianorder.do?p=payAgain&orid="+oid+"&orderId="+orid+"&id=submit-order.html";
					uni.navigateTo({
						url:'../../quanfan/SubmitOrder?orid='+id+'&gid='+gid,
					})
				}else if(s==2){
					// xielianorder.do?p=editOrderStatus
					let userid = uni.getStorageSync("usersId")	;
					uni.showModal({
						title:"确定收货?",
						success: (res) => {
							if(res.confirm){
								this.$http.get("/xielianorder.do?p=editOrderStatus",{
									orid:id,
								}).then(res=>{
									if(res.data=='3'){
										this.$u.toast("收货成功");
										uni.$emit('getOrderByGroup');
										uni.$emit('checkUserInfo');
										setTimeout(function(){
											uni.switchTab({
												url:'../index'
											})
										},500)
									}
								});
							}
						}
					})
				}
			},
			//查看物流
			checkWuliu(orId){
				console.log("全返商城查物流："+orId)
				this.$http.get('/xielianorder.do/getWuliu',{
					orid:orId
				}).then(res => {
					if(res.data.code==200){
						let src = 'https://m.kuaidi100.com/app/query/?coname=xielian&nu='+res.data.data.id+"&com="+res.data.data.pinyin+"&callbackurl=";
						uni.navigateTo({
							url:'../../quanfan/MyWebview/MyWebview?url='+encodeURIComponent(src)
						})
					}else{
						this.$u.toast("此订单有误!请联系客服人员")
					}
				})
				// let src = "https://m.kuaidi100.com/app/query/?com=yuantong&nu="+s+"&coname=xielian";
				// uni.navigateTo({
				// 	// SF1321722803277
				// 	url:'../../quanfan/MyWebview/MyWebview?url='+encodeURIComponent(src)
				// })
			},
			// 自提订单自提
			ziti(code){
				// console.log("跳转自提二维码界面"+code)
				uni.navigateTo({
					url:'zitiQrcode?code='+code
				})
			},
			// 手动删除订单
			shanOrder(id){
				// xielianorder.do?p=deleteOrder
				let userid = uni.getStorageSync("usersId")	;
				uni.showModal({
					title:"删除订单?",
					success: (res) => {
						if(res.confirm){
							this.$http.get("/xielianorder.do?p=deleteOrderByMini",{
								orid:id,
								userid:userid
							}).then(res=>{
								if(res.data=='success'){
									this.$u.toast("删除成功");
									uni.$emit('getOrderByGroup');
									uni.$emit('checkUserInfo');
									setTimeout(function(){
										uni.switchTab({
											url:'../index'
										})
									},500)
								}
							});
						}
					}
				})
			},
			// 加载订单数据
			getOrders(x,c){		// x表示订单状态，c表示tabs下标
				let uid = uni.getStorageSync("usersId")	;
				this.$http.get('/xielianorder.do', {
					p: 'myorderByMini',
					userid:uid,
					n:x==4?2:x,
					page:1,
					size:1000,
					peisongtype:x==4?'ziti':(x==1?'fahuo':(x==2?'fahuo':''))
				}).then(res => {
					if(res.data.odlist==null || res.data.odlist==undefined){
						return;
					}
					for(let i=res.data.odlist.length-1;i>-1;i--){
						let obj = { };
						obj['guiges'] = res.data.odlist[i].guiges;
						obj['gid'] = res.data.odlist[i].goods.gid;
						obj['orTime'] = res.data.odlist[i].goodsorders.orTime;
						obj['gname'] = res.data.odlist[i].goods.gname;
						obj['gimages'] = res.data.odlist[i].goods.gimages;
						obj['jianjie'] = res.data.odlist[i].goods.jianjie;
						obj['odCost'] = res.data.odlist[i].goodsorders.orPrice;				// 单价
						obj['odNum'] = res.data.odlist[i].odNum;							// 数量
						obj['orId'] = res.data.odlist[i].orId;								// 订单编号
						obj['orStatus'] = res.data.odlist[i].goodsorders.orStatus;			// 订单状态
						obj['odId'] = res.data.odlist[i].odId;								// 订单详情编号
						obj['orTotalnum'] = res.data.odlist[i].goodsorders.orTotalnum;		// 订单商品数量
						obj['orPrice'] = res.data.odlist[i].goodsorders.orPrice;			// 订单商品价格
						obj['orYunfei'] = res.data.odlist[i].goodsorders.orYunfei;			// 订单总价格
						obj['adId'] = res.data.odlist[i].goodsorders.adId;					// 收货地址
						obj['danhao'] = res.data.odlist[i].goodsorders.orRecipient;			// 快递单号
						obj['orPeisongtype'] = res.data.odlist[i].goodsorders.orPeisongtype;// 订单配送类型
						obj['code'] = res.data.odlist[i].goodsorders.code; 					// 提货二维码
						obj['zitiId'] = res.data.odlist[i].goodsorders.zitiId; 				// 提货二维码
						this.tabs[c].push(obj);
					}
				})
			}
		}
	}
</script>

<style scoped>
#demo1,#demo2,#demo3{
	/* height: 200rpx; */
}
#demo2{
}
#demo3{
}
.order-box{
	background-color: white;
	margin-bottom: 10rpx;
	padding: 20rpx 0rpx;
}
.order-box .ordertime{
	color: #FF7900;
	text-align: right;
	margin-bottom: 20rpx;
	font-size: 24rpx;
	padding-right: 20rpx;
}
.order-box .goods-info{
	display: flex;
	padding: 10rpx;
	background-color: #F6f6f6;
	height: 140rpx;
	align-items: flex-start;
	color: #111111;
}
.order-box .goods-info>view{
	flex: 1;
}
.order-box .goods-info>view:nth-child(2){
	flex: 4;
}
.order-box .goods-img{
	height: 100rpx;
	width: 100rpx;
}
.qian::before{
	content: '￥';
}
.order-box .summary-box{
	margin-top: 20rpx;
	text-align: right;
	padding-right:20rpx;
	margin-bottom: 20rpx;
	font-size: 24rpx;
}
.status-btn2{
	padding: 10rpx 20rpx;
	margin-right: 20rpx;
	color: #000000;
	border-radius: 40rpx;
	border: 2rpx solid #000000;
}
.order-box .status-box{
	display: flex;
	justify-content: flex-end;
	padding-right:20rpx;
	font-size: 24rpx;
}
.goods-name>view{
	display: flex;
	justify-content: space-between;
}
.status-btn{
	padding: 10rpx 20rpx;
	background-color: white;
	color: #FF7900;
	border-radius: 40rpx;
	border: 2rpx solid #FF7900;
}
.status-btn:first-child{
	margin-right: 10rpx;
	color: #111;
	border-color: #111;
}
.status-btn:nth-child(2){
	margin-right: 10rpx;
	color: #111;
	border-color: #111;
}
</style>
